<template>
  <div class="container">
    <div class="container-left">
      <div class="avatar">
        <img src="../../img/hyll.jpg" alt="">
      </div>
    </div>
    <div class="container-right">
      <h4 class="flower">花开富贵</h4>

      <div class="content-right1">
        <a href="javascript:void(0)" class="number">账号名：HUAKAIFUGUI</a>
        <a href="javascript:void(0)" >
          <van-icon name="ellipsis" />
        </a>
      </div>
      <div class="content-right2">
        <div class="add">
          <van-icon name="plus" />
          <span>状态</span>
        </div>
        <van-icon name="link-o" />
      </div>
    </div>
  </div>
  <div class="back">&nbsp;</div>
  <div class="wrapper-nav">
    <div class="function-text">我的功能</div>
    <div class="select-nav">
      <div class="item-icon">
        <van-icon name="chat-o" />
        <p class="btn-description">历史记录</p>
      </div>
      <div class="item-icon">
        <van-icon name="location-o" />
        <p class="btn-description">我的地址</p>
      </div>
      <div class="item-icon">
        <van-icon name="cart-o" />
        <p class="btn-description">我的订单</p>
      </div>
      <div class="item-icon">
        <van-icon name="bag-o" />
        <p class="btn-description">我的商品</p>
      </div>
    </div>
  </div>
  <div class="daiding">
  </div>
  <div class="out" v-show="willin">
    <van-button size="large" color="linear-gradient(to right, #ADD8E6, #8B008B)" @click="init">
      登录
    </van-button>
  </div>
  <div class="out" v-show="willout">
    <van-button size="large" color="linear-gradient(to right, #ff6034, #ee0a24)" @click="out">
      退出登录
    </van-button>
  </div>
</template>

<script>
import {showDialog, showToast, showConfirmDialog, showNotify} from "vant";
import axios from "axios";

export default {
  name: "my",
  data() {
    return {
      meList: [],
      userName: '',
      willin:'true',
      willout:'false'
    }
  },
  methods: {
    handleMeAddress() {
      this.$router.push('/order/confirm');
    },
    handleMeOrder() {
      this.$router.push('/cart/list');
    }, handleShopping() {
      this.$router.push('/business');
    },
    init() {
      this.$router.push('/user/login');
    },
    out() {
      showConfirmDialog({
        title: '退出登录',
        width: '500px',
        message:
            '你确定要退出吗？',
      })
          .then(() => {
            axios.get('/ele_server_war/logout')
            this.$router.push('/business/list')
            showNotify({ type: 'primary', message: '退出成功' });
          })
          .catch(() => {
            // on cancel
          });
    },
    _initCartList() {
      this.$axios.get('/ele_server_war/cart/list').then(({data : res}) => {
        if (res.status == 0) {
          this.willin=false;
          this.willout=true;
        } else {
          this.willin=true;
          this.willout=false;
        }
      })
    }
  },
  created() {
    console.log("登录"+this.willin);
    console.log("退出"+this.willout)
    this._initCartList();
  }
}
</script>

<style scoped lang="stylus">
*{
  margin: 0;
  padding: 0;
}
html{
  font-size: 16px;
}
.container{
  display: flex;
  width: 100vw;
  height: 135px;
}
.container .container-left{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1.5;
}
.container .container-right{
  display: flex;
  flex-direction: column;
  flex: 3;
}
.container .container-left .avatar{
  width: 80px;
  height: 80px;
  border-radius: 10px;
}
.container .container-left .avatar >img{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-position: center center;
  background-size: cover;
}
.container .container-right .flower{
  margin-top: 15px;
  font-size: 1rem;
  color: #242425;
  font-weight: bold;
}
.container .container-right .content-right1{
  display: flex;
  justify-content: space-between;
}
.container .container-right .content-right1 .number{
  text-decoration: none;
  font-size: 0.8rem;
  color: #5d5d60;
}
.container .container-right .content-right1 >a{
  text-decoration: none;
}
.container .container-right .content-right1 >a .van-icon{
  width: 20px;
  height: 20px;

}
.container .container-right .content-right2{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.container .container-right .content-right2 .add {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 72px;
  height: 35px;
  border-radius: 20px;
  border: 1px #a5a5a8 solid;
  margin-top: 14px;
}
.container .container-right .content-right2 .add >van-icon{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}
.container .container-right .content-right2 .update{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-top: 18px;
  color: #242425;
}
.back{
  display block
  width 100%
  height 12px
  background-color #c6c6c7
  border-radius 2px
  opacity 0.80
}
.wrapper-nav{

}
.wrapper-nav .function-text{
  margin-top 5px
  font-size 14px
  color #494646
  font-weight bold
}
.wrapper-nav .select-nav{
  display flex
  justify-content space-around
  margin-top 10px

}
.wrapper-nav .select-nav .item-icon{
  width 50px
  height 30px
}
.wrapper-nav .select-nav .item-icon van-icon{
  margin-left 10px
}
.wrapper-nav .select-nav .item-icon .btn-description{
  font-size 12px

}
.daiding{

}
.out{
    width 100%
    height 50px
    margin-top 300px
    display flex
    justify-content center
    align-items center
}
</style>